<template>
  <div id='order'>
    <!--内容头部  start-->
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>分销系统</el-breadcrumb-item>
        <el-breadcrumb-item>日志</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--内容头部  end-->
    <!--筛选条件 start-->
    <div class="condition-wrap">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="分销人">
              <el-select v-model="queryVo.qrCodeId" placeholder="请选择" :clearable="true">
                <el-option v-for="item in distributionlist" :label="item.DISTRIBUTION" :value="item.QR_CODE_ID"
                  :key="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="动作发生">
              <el-date-picker type="date" placeholder="日期" v-model="queryVo.createTime" style="width: 100%;"
                format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="动作">
              <el-select v-model="queryVo.operation" placeholder="请选择" :clearable="true">
                <el-option label="关注" value="focusOn"></el-option>
                <el-option label="下单" value="order"></el-option>
                <el-option label="成交" value="pay"></el-option>
                <el-option label="取消关注" value="cancel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="微信昵称">
              <el-input placeholder="支持模糊查询" v-model="queryVo.nickName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="22" style="text-align: right;">
            <el-button type="primary" @click="handleseach">搜索</el-button>
            <!--@click="onSubmit"-->
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--筛选条件 end-->
    <!--订单列表 start-->
    <div class='option-wrap'>
      <el-button type="primary" @click="exportlog">导出</el-button>
    </div>

    <div class="gird-wrap">
      <el-table :data="dataList" :border="true" height="600" style="width: 100%"
        :default-sort="{prop: 'create_Time', order: 'descending'}">
        <el-table-column prop="create_Time" label="动作发生日期" sortable="true"> </el-table-column>
        <el-table-column prop="nickName" label="微信昵称" sortable> </el-table-column>
        <el-table-column prop="order_No" label="订单编号" sortable> </el-table-column>
        <el-table-column prop="price" label="订单金额" sortable> </el-table-column>
        <el-table-column prop="operation" label="动作" sortable> </el-table-column>
        <el-table-column prop="distribution" label="分销人" sortable></el-table-column>
      </el-table>
    </div>
  </div>

</template>
<script>
  import r from '../utils/RequestUtil';
  export default {
    name: 'order_1',
    components: {},
    data: function () {
      return {
        queryVo: {
          pageSize: 10,
          pageNo: 1,
          operation: null,
          createTime: null,
          qrCodeId: null,
          nickName: null
        },
        dataList: [],
        distributionlist: [],
        totalcount: null,
      }
    },
    methods: {
      exportlog() {
        let params = this.queryVo;
        params.pageSise = 0;
        params.pageNo = 0;
      },
      queryOrders() {},
      handleseach: function () {
        if (this.queryVo.operation === "") {
          this.queryVo.operation = null;
        } else if (this.queryVo.createTime === "") {
          this.queryVo.createTime = null;
        } else if (this.queryVo.qrCodeId === "") {
          this.queryVo.qrCodeId = null;
        } else if (this.queryVo.nickName === "") {
          this.queryVo.nickName = null;
        } else if (this.queryVo.createTime === "") {
          this.queryVo.createTime = null;
        }
        this.queryOrders();
      },
      handleSizeChange: function (val) {
        this.queryVo.pageSize = val;
        this.queryOrders();
      },
      handleCurrentChange: function (val) {
        this.queryVo.pageNo = val;
        this.queryOrders();
      },
    },
    computed: {},
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  /*内容容器 内边距修改值*/
  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

  #user {
    min-width: 840px;
  }

</style>
